<template>
  <div>
    <ul>
      <li @click="toPage('/lifecycle')">Vue3生命周期</li>
      <li @click="toPage('/computed')">Vue3计算属性</li>
      <li @click="toPage('/dom')">Vue3获取dom</li>
      <li @click="toPage('/watch')">Vue3中watch与watchEffect</li>
      <li @click="toPage('/hook')">Vue3中hook的使用</li>
      <li @click="toPage('/mixin')">Vue2中的混入</li>
      <li @click="toPage('/test')">test</li>
      <li @click="toPage('/doLogin')">doLogin</li>
      <li @click="toPage('/shallow')">shallow</li>
      <li @click="toPage('/raw')">toRaw与markRaw</li>
      <li @click="toPage('/readonly')">readonly与shallowReadonly</li>
      <li @click="toPage('/toref')">toref</li>
    </ul>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    let router = useRouter();

    let toPage = (path: string): void => {
      router.push({
        path: path,
      });
    };
    return {
      toPage,
    };
  },
};
</script>

<style scoped >
</style>














